<template>
  <div class="glsx_table_box">
    <el-table class="el_table" :data="list" :size="size">
      <el-table-column type="selection" width="55" v-if="this.selection" />
      <el-table-column v-for="(item,index) in column" :key="index" :label="item.label" :prop="item.prop" :formatter="item.formatter" :align="item.align" :fixed="item.fixed" :width="item.width" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" v-if="this.$scopedSlots.operate" width="120px">
        <template slot-scope="scope">
          <slot name="operate" :scope="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination_list">
      <el-pagination background layout="sizes, total,prev, pager, next, jumper" :total="pageTotal" :page-size="pageSize" :page-sizes="pageSizes" @current-change="getList" @size-change="changePageSize" />
    </div>
  </div>
</template>

<script>
/**
 * list: 表格数据
 * border：是否带边框
 * size：表格尺寸
 * column: 列数据
 * layout:分页展示数据
 * pageSizes: 默认展示多少页列表
 * pageSize: 当前展示页条数
 */
export default {
  name: "GlsxTable",
  props: {
    list: {
      type: Array,
      default: function () {
        return [];
      },
    },
    column: {
      type: Array,
      default: function () {
        return [];
      },
    },
    border: {
      type: Boolean,
      default: true,
    },
    size: {
      type: String,
      default: "small",
    },
    layout: {
      type: String,
      default: "sizes, total,prev, pager, next, jumper",
    },
    pageTotal: {
      type: Number,
      default: 0,
    },
    pageSizes: {
      type: Array,
      default: function () {
        return [10, 20, 30, 40];
      },
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    selection: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  created() {
    //console.log(this.$scopedSlots);
  },
  mounted() {
  },
  methods: {
    /**
     * 每页展示
     */
    changePageSize: function (e) {
      this.pageSize = e;
      this.$emit("change", { pageSize: e });
      //this.getList();
    },

    // 获取列表
    getList(current) {
      this.$emit("change", { pageNumber: current });
    },
  },
};
</script>
<style lang="scss">
.el_table {
  width: 100%;
  thead {
    th {
      background: #eef7fe;
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
    }
  }
  tbody {
    td {
      .el_link {
        margin: 0 8px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.glsx_table_box {
  margin: 10px 0;
}
.pagination_list {
  text-align: right;
  padding: 10px 0;
}
</style>